<template>
  <page-header-wrapper>
    <page-tab-list>
    </page-tab-list>
    <a-card :bordered="false">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 2 }" :wrapper-col="{ span: 14 }">
        <a-form-model-item label="链接地址" prop="url">
          <a-input v-model="form.url" style="width: 500px" />
        </a-form-model-item>
        <a-form-model-item label="App Key" prop="key">
          <a-input v-model="form.key" style="width: 500px" />
        </a-form-model-item>
        <a-form-model-item label="App Secret" prop="secret">
          <a-input v-model="form.secret" style="width: 500px" />
        </a-form-model-item>

        <div class="btn">
          <a-button type="primary" :loading="btnLoading" @click="onSubmit"> 保存 </a-button>
        </div>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { getAccount, setAccount } from '@/api/purchase/stbz'
import tabList from '@/views/saas/components/tabList.vue'

export default {
  components: {
    tabList
  },
  data () {
    return {
      tabList: [
        {
          key: 'saasPurchaseStbzSetting',
          name: '账号设置'
        }
      ],
      form: {
        key: '',
        secret: '',
        url: ''
      },

      rules: {
        key: [{ required: true, message: '请输入App Key', trigger: 'blur' }],
        secret: [{ required: true, message: '请输入App Secret', trigger: 'blur' }]
      },

      btnLoading: false
    }
  },
  created () {
    this.getSetting()
  },
  methods: {
    // 获取配置数据
    async getSetting () {
      this.btnLoading = true
      const res = await getAccount()
      this.btnLoading = false
      if (res.code == 0) {
        this.form = res.data
      }
    },
    onSubmit () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.btnLoading = true
          const res = await setAccount(this.form)
          this.btnLoading = false
          if (!res.code) {
            this.$message.success('保存成功！')
          } else {
            this.$message.error(res.msg)
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
h3 {
  font-weight: bold;
}

.btn {
  padding-top: 30px;
  text-align: center;
  border-top: 1px solid #d9d9d9;
}
</style>
